<template>
  <el-dialog title="查看" :visible.sync="viewDialog" width="50%" :close-on-click-modal="false" close-on-press-escape>
    <div id="printMe">
      <!-- <div class="number">编号：{{ obj.serialNumber }}</div> -->
      <div class="title">动火作业前现场检查表（检验单）</div>
      <table>
        <tr>
          <td>编号</td>
          <td colspan="3">{{ obj.serialNumber }}</td>
        </tr>
        <tr>
          <td>动火作业单位</td>
          <td>{{ obj.hotWorkUnit }}</td>
          <td>动火级别</td>
          <td>{{ obj.hotLevel }}</td>
        </tr>
        <tr>
          <td>生产运行部门</td>
          <td>{{ obj.productionDepartment }}</td>
          <td>动火时间</td>
          <td>{{ obj.hotTime | dateFormat("YYYY-MM-DD HH:mm:ss") }}</td>
        </tr>
        <tr>
          <td>动火监督部门</td>
          <td>{{ obj.supervisionDepartment }}</td>
          <td>天气情况</td>
          <td>{{ obj.weather }}</td>
        </tr>
      </table>
      <table class="content">
        <tr>
          <td>序号</td>
          <td>检查内容</td>
          <td>检查人</td>
          <td>签字</td>
        </tr>
        <tr v-for="item in hotWorkData" :key="item.code">
          <td>{{ item.sort }}</td>
          <td>{{ item.content }}</td>
          <td v-if="item.sort == 1" :rowspan="hotWorkData.length">动火作业</td>
          <td v-if="item.sort == 1" :rowspan="hotWorkData.length">{{ obj.hotWorkUserName }}</td>
        </tr>
        <tr v-for="item in productionOperationData" :key="item.code">
          <td>{{ hotWorkData.length + item.sort }}</td>
          <td>{{ item.content }}</td>
          <td v-if="item.sort == 1" :rowspan="productionOperationData.length">生产运行</td>
          <td v-if="item.sort == 1" :rowspan="productionOperationData.length">{{ obj.productionRunUserName }}</td>
        </tr>
        <tr v-for="item in hotWorkSupervisionData" :key="item.code">
          <td>{{ hotWorkData.length + productionOperationData.length + item.sort }}</td>
          <td>{{ item.content }}</td>
          <td v-if="item.sort == 1" :rowspan="hotWorkSupervisionData.length">动火监督</td>
          <td v-if="item.sort == 1" :rowspan="hotWorkSupervisionData.length">{{ obj.hotSupervisionUserName }}</td>
        </tr>
        <tr>
          <td colspan="4">
            备注:{{ obj.remark ? obj.remark : "" }}
          </td>
        </tr>
        <tr>
          <td colspan="4" class="spyj">
            动火现场指挥审批意见：{{ obj.hotCommandApproval ? obj.hotCommandApproval.approvalComments : "" }}
          </td>
        </tr>
        <tr class="last-row">
          <td colspan="4">
            <span>签字：{{ obj.hotCommandUserName }}</span>
            <span
              v-if="obj.hotCommandApproval"
            >{{ obj.hotCommandApproval.approvalTime | dateFormat("YYYY 年 MM 月 DD 日") }}</span>
            <span v-else />
          </td>
        </tr>
      </table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="viewDialog = false">取 消</el-button>
      <el-button
        v-print="{
          id: 'printMe',
          popTitle: ''
        }"
        type="primary"
      >打 印</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  postHandle
} from '@/api'
import {
  mixin
} from './inspectionSheet'
export default {
  mixins: [mixin],
  data() {
    return {
      maxPageSize: {
        p: 1,
        ps: 9999
      },
      obj: {
        hotCommandApproval: {}
      },
      viewDialog: false
    }
  },
  created() {},
  methods: {
    // 详情
    getObjectId({
      id
    }) {
      postHandle(`/api/v1/welder-sbtx-second/inspection-comb/show/${id}`).then(res => {
        this.obj = res.result
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .title {
    text-align: center;
    border: none;
    margin-bottom: 20px;
  }

  .number {
    text-align: right;
    border: none;
    width: 100%;
    margin-bottom: 20px;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid;

    td {
      line-height: 18px;
      border: 1px solid;
      padding: 8px;
    }

    td:nth-child(odd) {
      width: 20%;
    }

    td:nth-child(even) {
      width: 30%;
    }
  }

  .content {
    border-top-color: #ffffff;

    &>tr:nth-child(1) td {
      border-top-color: #ffffff;
    }

    td:nth-child(1) {
      width: 12%;
    }

    td:nth-child(2) {
      width: 60%;
    }

    td:nth-child(3) {
      width: 16%;
    }
  }

  .last-row {
    text-align: right;

    span:nth-child(1) {
      margin-right: 50px;
    }
  }

  .spyj {
    border-bottom-color: #ffffff !important;
  }
</style>
